import React from 'react'
import {CSSTransition} from 'react-transition-group'
import {CSSTransitionProps} from 'react-transition-group/CSSTransition'

type AnimationName = 'zoom-in-left' | 'zoom-in-top' |'zoom-in-bottom' | 'zoom-in-right';

// interface TransitionProps extends CSSTransitionProps {
//     animation ?: AnimationName;
// }

type TransitionProps = CSSTransitionProps & {
    animation?: AnimationName,
    wrapper? : boolean,
}


const Transition:React.FC<TransitionProps> = (props)=>{
    const {
        children,
        classNames,
        animation,
        ...restProps
    } = props

    return(
        <CSSTransition
            classNames = {classNames ? classNames : animation}
            {...restProps}
        >
        </CSSTransition>
    )
}


export default Transition